import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import './index.less';
import Button from '@mui/material/Button';
import { PracticeApi } from '@/api/';
import PracticeList from './components/practiceList';
import GoBack from '@/components/goback';
import useToast from '@/utils/toast';
interface ITypeMap {
  [key: string]: string; //索引器 可以这样写  对象[新key]
}

let subNum: ISelectOption[] = [
  { key: '5', value: 5 },
  { key: '10', value: 10 },
  { key: '20', value: 20 },
  { key: '30', value: 30 },
  { key: '50', value: 50 },
  { key: '100', value: 100 },
];
let classifyTit: ISelectOption[] = [
  { key: '全部', value: 'all' },
  { key: '错误', value: 'err' },
  { key: '已做', value: 'done' },
  { key: '没做', value: 'notdone' },
];
// 进入答题内容请求需要的数据(抽离成自定义hook)
function useQuestionParams(): [IDataParams, Function] {
  const { actionCode } = useParams();
  const [testNum, setTestNum] = useState(5);
  const [testType, setTestType] = useState('all');
  const [questionType, setQuestionType] = useState('all');

  function setData(params: IDataParams) {
    params.testNum && setTestNum(params.testNum);
    params.testType && setTestType(params.testType);
    params.questionType && setQuestionType(params.questionType);
  }
  const data: IDataParams = { actionCode, testNum, testType, questionType };
  return [data, setData];
}
export default function Practice() {
  const navigate = useNavigate();
  const [questType, setQuestType] = useState<ISelectOption[]>([]);
  const TypeMap: ITypeMap = {
    all: '全部',
    qa: '问答',
    fill: '填空',
    one: '单选',
    check: '判断',
    code: '编程',
    many: '多选',
  };
  const [data, setData] = useQuestionParams();
  let toast = useToast();
  useEffect(() => {
    PracticeApi({
      // ts认为 params.actionCode 可能会有，可能没有
      // 一定会有，通过一个 ! 告诉ts一定会有----类型断言
      actionCode: data.actionCode!,
      testType: 'all',
    }).then((res) => {
      if (res.errCode === 0) {
        // console.log(res);
        // res data 里面的数据是 {key:"all",value:12}
        // 想要的这个样子{key:"全部 12"，value:"all"}
        // TypeMap[res.data[0].key]+''+res.data[0].value===全部12
        let temp = res.data.map((item) => {
          return {
            key: TypeMap[item.key] + item.value, //全部 24
            value: item.key, //all
          };
        });
        setQuestType(temp);
      }
    });
  }, []);
  // 点击进入练习模式
  const gotoStudy = () => {
    navigate('/study', { state: data });
  };
  return (
    <div className="practice">
      <div className="practice_top">
        <Button variant="contained" className="btn" onClick={gotoStudy}>
          进入练习模式
        </Button>
        <Button
          variant="contained"
          className="btn org"
          onClick={() => toast('warning', '该功能暂未开放')}
        >
          进入考试模式
        </Button>
      </div>
      <PracticeList
        title="试题分类"
        data={classifyTit}
        onChange={(value) => {
          // console.log(value);
          setData({
            testType: value,
          });
        }}
      />
      <PracticeList
        title="题目分类"
        data={questType}
        onChange={(value) => {
          // console.log(value);
          setData({
            questionType: value,
          });
        }}
      />
      <PracticeList
        title="做题数量"
        data={subNum}
        onChange={(value) => {
          // console.log(value);
          setData({
            testNum: value,
          });
        }}
      />
      <GoBack></GoBack>
    </div>
  );
}
